<template>
  <div class="aillo-initiate-char">
    <Dialog :visible.sync="visible" width="540px" :before-close="handleClose">
      <div class="aillo-initiate-char-body">
        <div class="aillo-initiate-char-left">
          <el-input
            clearable
            class="aillo-initiate-char-left__search"
            placeholder="搜索..."
            v-model="search"
          >
            <img
              slot="prefix"
              src="../../assets/picture/iconfont-sousuo@2x.png"
              @click="searchFn()"
            />
          </el-input>
          <div class="aillo-initiate-char-left__userList">
            <div
              class="aillo-initiate-char-left__userList__alphabet"
              v-for="(item, index) in rankUserList"
              :key="index"
            >
              <div class="aillo-initiate-char-left__userList__alphabet__title">{{ item.key }}</div>
              <div
                class="aillo-initiate-char-left__userList__alphabet__cell"
                v-for="(value, i) in item.value"
                :key="i"
              >
                <div>
                  <img :src="value.avatar" />
                  <span>{{ value.name }}</span>
                </div>
                <Checkbox :disabled="disabled" v-model="value.select" :checked="value.select" />
              </div>
            </div>
          </div>
        </div>
        <div class="aillo-initiate-char-right">
          <div class="aillo-initiate-char-right__title" v-if="isGroup && !isEncrypt">发起群聊</div>
          <div class="aillo-initiate-char-right__title" v-if="isGroup && isEncrypt">发起加密群聊</div>
          <div class="aillo-initiate-char-right__title" v-if="!isGroup && isEncrypt">发起加密聊天</div>
          <div
            class="aillo-initiate-char-right__cell"
            v-for="(item, index) in selectUserList"
            :key="index"
          >
            <div>
              <Avatar
                class="aillo-initiate-char-right__cell__avatar"
                :size="34"
                :src="item.avatar"
              />
              <span>{{ item.name }}</span>
            </div>
            <i class="tico tico-circle-close-b" @click="cancelSelectUser(item)" />
          </div>
          <div class="aillo-initiate-char-right__footer">
            <Button
              class="aillo-initiate-char-right__footer__button"
              size="small"
              round
              type="info"
              @click="handleClose"
            >取消</Button>
            <Button
              class="aillo-initiate-char-right__footer__button"
              size="small"
              round
              type="primary"
            >创建</Button>
          </div>
        </div>
      </div>
    </Dialog>
  </div>
</template>

<script>
import { Dialog, Checkbox, Button, Avatar } from 'element-ui'
import pinyin from 'chinese-to-pinyin'
import _ from 'lodash'

export default {
  components: { Dialog, Checkbox, Button, Avatar },
  props: ['visible', 'isEncrypt', 'isGroup', 'friendList'],
  data () {
    return {
      rankUserList: [],
      search: null
    }
  },
  computed: {
    disabled: function () {
      if (this.isGroup || (!this.isGroup && this.selectUserList.length < 1)) {
        return false
      } else return true
    },
    selectUserList: function () {
      const selectUserList = []
      for (let i = 0; i < this.rankUserList.length; i++) {
        for (let j = 0; j < this.rankUserList[i].value.length; j++) {
          if (this.rankUserList[i].value[j].select) {
            selectUserList.push(this.rankUserList[i].value[j])
          }
        }
      }
      return selectUserList
    }
  },
  methods: {
    cancelSelectUser (data) {
      for (let i = 0; i < this.rankUserList.length; i++) {
        for (let j = 0; j < this.rankUserList[i].value.length; j++) {
          if (this.rankUserList[i].value[j].id === data.id) {
            this.rankUserList[i].value[j].select = false
          }
        }
      }
    },
    handleClose () {
      for (let i = 0; i < this.rankUserList.length; i++) {
        for (let j = 0; j < this.rankUserList[i].value.length; j++) {
          this.rankUserList[i].value[j].select = false
        }
      }
      this.$emit('changeInitiateCharVisible', false)
    }
  },
  watch: {
    visible: {
      handler (newdata) {
        if (newdata) {
          const friendList = _.cloneDeep(this.friendList)
          let tempList = []
          for (let i = 0; i < friendList.length; i++) {
            if (friendList[i].name * 1) {
              tempList.push(friendList[i])
            }
          }
          const _friendList = _.pullAllBy(friendList, tempList, 'id')
          const _userList = _.map(_friendList, (e) => {
            e.pinyin = pinyin(e.name, { removeTone: true })
            return e
          })
          const rankUserList = []
          for (let i = 97; i < 123; i++) {
            for (let j = 0; j < _userList.length; j++) {
              if (_userList[j].pinyin.substring(0, 1).charCodeAt() === i) {
                let flag = true
                for (let k = 0; k < rankUserList.length; k++) {
                  for (let l = 0; l < rankUserList[k].length; l++) {
                    if (rankUserList[k].key === String.fromCharCode(i).toUpperCase()) {
                      rankUserList[k].value.push(_userList[j])
                      flag = false
                    }
                  }
                }
                if (flag) {
                  rankUserList.push({ key: _userList[j].pinyin.substring(0, 1).toUpperCase(), value: [{ ..._userList[j], select: false }] })
                }
              }
            }
          }
          rankUserList.push({ key: '#', value: tempList })
          this.rankUserList = rankUserList
        }
      }
    }
  }
}
</script>

<style lang="scss">
.aillo-initiate-char {
  .el-dialog__header {
    display: none;
  }
  .el-dialog__body {
    padding: 0 !important;
  }
  .aillo-initiate-char-body {
    display: flex;
    .aillo-initiate-char-left {
      padding: 20px;
      border-right: 1px solid #eee;
      .el-input__prefix {
        top: 10px !important;
      }
      .el-input__inner {
        border-radius: 20px;
        background-color: #f5f5f5;
      }
      &__search {
        width: 230px;
        height: 30px;
        margin-bottom: 21px;
      }
      &__userList {
        &__alphabet {
          margin-bottom: 20px;
          .el-checkbox__inner {
            border-radius: 100px;
          }
          &__title {
            font-size: 14px;
            color: #999;
          }
          &__cell {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 9px;
            div {
              display: flex;
              align-items: center;
              img {
                width: 34px;
                height: 34px;
                margin-right: 11px;
                border-radius: 100px;
              }
            }
          }
        }
      }
    }
    .aillo-initiate-char-right {
      width: 100%;
      padding: 20px;
      &__title {
        font-weight: 500;
        font-size: 16px;
        margin-bottom: 20px;
      }
      &__cell {
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        &__avatar {
          margin-right: 11px;
        }
        div {
          display: flex;
          align-items: center;
        }
        i {
          cursor: pointer;
          font-size: 18px;
          color: #bbbbbb;
        }
      }
      &__footer {
        position: absolute;
        bottom: 20px;
        right: 20px;
        &__button {
          margin-left: 20px;
          width: 80px;
          height: 30px;
        }
      }
    }
  }
}
</style>
